<template>
  <el-dialog
      title="车辆信息"
      :visible="visible"
      @update:visible="closeDialog"
      width="50%"
      style="border-radius: 12px;
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: calc(100% - 30px);
      max-width: calc(100% - 30px);
      justify-content: center;"
      :close-on-click-modal="false"
  >
    <el-form :model="formData" :rules="rules" ref="vehicleForm" label-width="120px" style="padding: 20px 50px 20px 0">
      <el-form-item label="车辆编码" prop="vehicleNo">
        <el-input v-model="formData.vehicleNo" placeholder="请输入车辆编码" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="vehicleType">
        <el-input v-model="formData.vehicleType" placeholder="请输入车辆类型"></el-input>
      </el-form-item>
      <el-form-item label="车辆容量" prop="capacity">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-input-number size="small" v-model="formData.capacity" :min="0" placeholder="请输入容量" style="width: 100%;"></el-input-number>
          </el-col>
          <el-col :span="12">
            <el-select v-model="formData.capacityUnit" placeholder="请选择容量单位" style="width: 100%; margin-left: 10px">
              <el-option label="立方米" value="m³"></el-option>
              <el-option label="升" value="L"></el-option>
              <el-option label="加仑" value="gal"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="负责人" prop="vehiclePerson">
        <el-input v-model="formData.vehiclePerson" placeholder="请输入负责人"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="vehiclePhone">
        <el-input v-model="formData.vehiclePhone" placeholder="请输入负责人联系方式"></el-input>
      </el-form-item>
      <el-form-item label="温控" prop="temperatureNeed">
        <el-switch v-model="formData.temperatureNeed"></el-switch>
      </el-form-item>
      <el-form-item v-if="formData.temperatureNeed" label="温控范围">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-input-number size="small" v-model="formData.temperatureLow" :min="-100" :max="100" placeholder="下限" style="width: 100%;"></el-input-number>
          </el-col>
          <el-col :span="2" style="text-align: center;">~</el-col>
          <el-col :span="8">
            <el-input-number size="small" v-model="formData.temperatureHigh" :min="-100" :max="100" placeholder="上限" style="width: 100%;"></el-input-number>
          </el-col>
          <el-col :span="7">
            <el-select v-model="formData.temperatureUnit" placeholder="单位" style="width: 100px ; margin-left: 10px">
              <el-option label="摄氏度" value="℃"></el-option>
              <el-option label="华氏度" value="℉"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="湿控" prop="humidityNeed">
        <el-switch v-model="formData.humidityNeed"></el-switch>
      </el-form-item>
      <el-form-item v-if="formData.humidityNeed" label="湿控范围">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-input-number size="small" v-model="formData.humidityLow" :min="0" :max="100" placeholder="下限" style="width: 100%;"></el-input-number>
          </el-col>
          <el-col :span="2" style="text-align: center;">~</el-col>
          <el-col :span="8">
            <el-input-number size="small" v-model="formData.humidityHigh" :min="0" :max="100" placeholder="上限" style="width: 100%;"></el-input-number>
          </el-col>
          <el-col :span="7">
            <el-select v-model="formData.humidityUnit" placeholder="单位" style="width: 100px; margin-left: 10px">
              <el-option label="%" value="%"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, watch, onMounted } from 'vue';

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:visible', 'save'],
  setup(props, { emit }) {
    const defaultFormData = () => ({
      vehicleNo: '',
      vehiclePerson: '',
      vehicleType: '',
      capacity: null,
      capacityUnit: '',
      vehiclePhone: '',
      temperatureNeed: false,
      temperatureLow: '',
      temperatureHigh: '',
      temperatureUnit: '',
      humidityNeed: false,
      humidityLow: '',
      humidityHigh: '',
      humidityUnit: '',
    });

    const formData = reactive(defaultFormData());

    const resetFormData = () => {
      Object.assign(formData, defaultFormData());
    };

    // 初始化表单数据
    watch(
        () => props.data,
        (newData) => {
          if (props.visible) {
            Object.assign(formData, defaultFormData(), newData || {});
          }
        },
        { immediate: true }
    );

    watch(
        () => props.visible,
        (visible) => {
          if (!visible) {
            resetFormData();
          }
        }
    );

    const closeDialog = () => {
      emit('update:visible', false); // 通知父组件关闭弹窗
    };

    const save = () => {
      emit('save', formData); // 通知父组件保存数据
    };

    onMounted(() => {
      if (props.visible) {
        Object.assign(formData, defaultFormData(), props.data || {});
      }
    });

    return {
      formData,
      closeDialog,
      save,
    };
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
